<template>
    <div class="el-header">
      <div style="width: 15%;background-color: #fff">
        <img src="../assets/img/newLogo.png" alt="">
        <span style="font-size:26px;text-align: center" >
        兵团生态环境分区管控信息管理平台
        </span>
      </div>
      <div style="width: 85%;">
        <div id="topbar">
          <el-menu
            :default-active="activeIndex2"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            text-color="#fff"
            active-text-color="#fff">
           <el-menu-item v-for="item in meau"  :index="item.path" :key="item.menuId">{{item.name}}</el-menu-item>
            <!--<el-menu-item index="/shouye">首页</el-menu-item>
            <el-menu-item index="/home">成果填报审核</el-menu-item>
&lt;!&ndash;            <el-menu-item index="/zhData">成果数据整合</el-menu-item>&ndash;&gt;
            <el-menu-item index="/showData">成果数据展示</el-menu-item>
            <el-menu-item index="/zhonghe">成果综合整合管理</el-menu-item>
            <el-menu-item index="/hjjczc">环境决策支持</el-menu-item>
            <el-menu-item index="/share">成果数据共享</el-menu-item>
            <el-menu-item index="/houtai">后台管理</el-menu-item>-->
          </el-menu>
        </div>
        <div class="logout">
          <img style="margin-top: 10px" src="../assets/img/username3.png"  alt="">
          <div style="text-align: center;display: inline-block;vertical-align: middle;margin-top: -40px">
            <el-dropdown>
            <span  style="font-size: 20px;margin-left: 10px;color: #fff">{{ name }}<i class="el-icon-arrow-down el-icon--right"></i></span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item><span @click="editPwd">修改密码</span></el-dropdown-item>
               <!-- <el-dropdown-item>修改个人信息</el-dropdown-item>-->
                <el-dropdown-item ><span @click="logout">注销登录</span></el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="user" style="display: inline-block;position: absolute;right: 2%;text-align: center">
          <el-button type="info" @click="logout "><span @click="logout" style="margin-left: 0">注销</span></el-button>
        </div>
      </div>
      <el-dialog
        title="修改用户密码"
        :visible.sync="editdialogVisible"
        width="25%"
        center
      >
        <el-form ref="editFormRef" :model="editForm" label-width="95px" :rules="editFormRules">
          <el-form-item label="真实姓名" prop="name">
            <el-input v-model="name" disabled></el-input>
          </el-form-item>
          <el-form-item label="原密码" prop="pwd"  >
            <el-input type="password" v-model="editForm.pwd" autocomplete="off"> </el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newpwd"  >
            <el-input type="password" v-model="editForm.newpwd" autocomplete="off"> </el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass"  >
            <el-input type="password" v-model="editForm.checkPass" autocomplete="off"> </el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="telephone">
            <el-input v-model="editForm.telephone" style="width: 70%"></el-input>
       <!--     <el-button style="height: 2.5rem;margin-left: 3%;border-radius: 0.5rem;width: 27%; padding: 0;background-color:#3ee8c2; color: #000000;font-size: 0.8vw">发送验证码</el-button>
       -->   </el-form-item>
          <!--<el-form-item label="短信验证码" prop="post">
            <el-input v-model="editForm.post"  autocomplete="off"></el-input>
          </el-form-item>-->
        </el-form>
        <span slot="footer" class="dialog-footer">
     <el-button round type="goon" size="medium" @click="editdialogVisible = false">取 消</el-button>
    <el-button round type="goon" size="medium" @click="isEditPwd('editFormRef')">确 定</el-button>
  </span>
      </el-dialog>
    </div>
</template>

<script>
  export default {
    name: 'daohang',
    data() {
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.editForm.newpwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
      return {
        activeIndex2: '',
        meau:[],
        name:'',
        editdialogVisible:false,
        editForm:{
        },
        editFormRules:{
          pwd:[{required:true,message:'请输入原密码',trigger:'blur'}],
          newpwd:[{required:true,message:'请输入新密码',trigger:'blur'}],
          checkPass: [{ validator: validatePass2, trigger: 'blur' },{required:true,message:'请输入密码',trigger:'blur'}],
          telephone:[{required:true,message:'请输入手机号',trigger:'blur'}],
          // post:[{required:true,message:'请输入短信验证码' ,trigger:'blur'}],
        },
      };
    },
    created(){
      /*if(window.sessionStorage.getItem('activePath')==null){
        this.activeIndex2='/shouye'
      }else {
        this.activeIndex2=window.sessionStorage.getItem('activePath')
      }*/
    this.meau=JSON.parse(window.sessionStorage.getItem('menulevel1'));
    if(window.sessionStorage.getItem('activePath')){
      this.activeIndex2= window.sessionStorage.getItem('activePath')
    }else {
      this.activeIndex2=this.meau[0].path;
    }
    this.name=window.sessionStorage.getItem('name')
    },
    methods: {
      handleSelect(key, keyPath) {
        window.sessionStorage.setItem('activePath',key)
        this.activeIndex2= key
        this.$router.push(this.activeIndex2)
      },
      logout () {
        window.sessionStorage.removeItem('token')
        this.$router.push('./login')
      },
      editPwd(){
        this.editdialogVisible=true;
      },
      isEditPwd(editFormRef){
        this.$refs[editFormRef].validate(async (valid) => {
          if (valid) {
            const {data:res}= await this.$http3.post('/v1.0/user/updatePassword/'+this.editForm.pwd+'/'+this.editForm.newpwd+'/'+ window.sessionStorage.getItem("userid"))
            if(res.status!=="2010"){
              return  this.$message.error('修改密码失败！')
            }
            this.$message.success('修改密码成功！');
          } else {
            console.log('出错了!!');
            return false;
          }
        });
      },
    },
    watch:{
      '$route.path':function (newVal,oldVal) {
        console.log(newVal+"12"+oldVal)
        // if(newVal=="/shiList" || newVal=="/wenList" || newVal=="/tuList" || newVal=="/yanList"){
        //   this.activeIndex2="/shilist";
        // }else if(newVal=="/mapList"){
        //   this.activeIndex2="/showData";
        // }

      }
    }
   /* computed:{
      activePathFn(){
        console.log(this.activeIndex2)
        this.$router.push(this.activeIndex2)
        return this.activeIndex2;
      }
    },*/
  }
</script>

<style lang="less" scoped>
  .el-header {
    position: absolute;
    width: 85%;
    height: 100%;
    padding: 0;
    img {
      //width: 10%;
      height: 80%;
      margin-left: 15px;
    }
    > div {
      display: flex;
      align-items: center;
      height: 100%;
      span {
        margin-left: 15px;
        color: #45524f;
      }
    }
    .el-menu{
      position: absolute;
      left: 5%;
      top: 10%;
      border-bottom:0;
      height: 80%;
      background:-webkit-linear-gradient(left,#3ee8c2,#25e4a3) ;
      .el-menu-item{
        ///*font-size: 0.75em;*/
        //font-size: 1.7em;
        padding: 0 15px !important;
        font-size: 20px;
        //font-weight: bold;
      }
  }
}
  #topbar{
    position: absolute;
    background:-webkit-linear-gradient(left,#3ee8c2,#25e4a3) !important;
    left: 15%;
    width:85%;
    height: 100%;
    text-align: center;
  }
  .logout{
    position: absolute;
    right: 8%;
    text-align: center;
  }
  /deep/ .el-menu--horizontal>.el-menu-item.is-active {
    border-bottom: none;

  }
  /deep/ .el-menu-item.is-active {
    border-radius: 8px;
    background: -webkit-linear-gradient(top,#0baf8a,#074c34) !important;

  }
  /deep/ .el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, .el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, .el-menu--horizontal>.el-submenu .el-submenu__title:hover{
    background: -webkit-linear-gradient(top,#0baf8a,#074c34) !important;
    border-radius: 8px;
  }
  li{
    text-align: center;
  }
  /deep/ .el-dialog{
    border-radius: 8px;
  }
  /deep/ .el-dialog__header {
    //background: -webkit-linear-gradient(left, #3ee8c2, #25e4a3);
    border-radius: 8px 8px 0 0 ;
  }

  ::v-deep .el-button--goon:focus, .el-button--goon:hover {
    color: #fff;
    border-color: #c6e2ff;
    background: -webkit-linear-gradient(left,#3ee8c2,#25e4a3);
  }
  ::v-deep .el-button--goon:active {
    color: #fff;
    border-color: #c6e2ff;
    outline: 0;
  }
  ::v-deep .el-dialog__title{
    font-weight: bold;
    font-size: 20px;
    color: #45524f;
  }
</style>
